<!--
 * @Author: your name
 * @Date: 2019-12-20 00:05:38
 * @LastEditTime : 2019-12-23 09:01:42
 * @LastEditors  : Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ickt26phase_2group_project\project\src\views\Order.vue
 -->
<template>
  <div class="app">
    <div class="nothing">
      <Header class="header">
        <mu-icon
          class="mu-icon"
          value="arrow_back"
          slot="left"
          @touchend="back"
        ></mu-icon>
        <span slot="title">我的理财产品</span>
      </Header>
      <div class="gologin" v-if="!token">
        <mu-dialog
          title="提示"
          width="600"
          max-width="80%"
          :esc-press-close="false"
          :overlay-close="false"
          :open="firstOpenAlert"
        >
          ！ 您未登录，请先登录账号
          <mu-button
            slot="actions"
            flat
            color="primary"
            @click="firstCloseAlertDialog"
            >取消</mu-button
          >
          <mu-button slot="actions" flat color="primary" @click="clickFirstConfirm"

            >确定</mu-button
          >
        </mu-dialog>
      </div>
      <div v-else>
        <div class="middle" v-show="!$store.getters.dealTitle.length">
          <p class="title">还没有预约任何产品</p>
          <p class="button">
            <router-link class="a" to="/money">
              <div class="adiv">
                <img src="../../public/img/images/人.png" alt="" />
                马上去预约
              </div>
            </router-link>
            <!-- <router-link class="a" to="/login">
                  <div class="adiv">
                    <img src="../../public/img/images/人.png" alt="">
                    马上去预约
                  </div>
                </router-link> -->
          </p>
        </div>
        <div
          class="listall"
          v-for="(itemChild, indexChild) in $store.getters.dealTitle"
          :key="indexChild"
        >
          <span v-if="$store.getters.dealTitle.indexOf(itemChild) !== -1">{{
            itemChild
          }}</span>
          <div class="list" v-for="item in $store.state.product" :key="item.id">
            <div v-if="item.app === true">
              <div v-if="item.title === itemChild">
                <div class="listdetail">
                  <div class="top">
                    <div class="left">
                      <ul>
                        <li>
                          <p class="one">{{ item.yqsyl }}</p>
                          <p class="two">预期年化率</p>
                        </li>
                        <li>
                          <p class="one">{{ item.tzqx }}</p>
                          <p class="two">投资期限</p>
                        </li>
                        <li>
                          <p class="one">{{ item.qtje_title }}</p>
                          <p class="two">起头金额</p>
                        </li>
                      </ul>
                    </div>
                    <div class="right">
                      <img src="../../public/img/images/进行中.png" alt="" />
                      <p class="rm">推广返币</p>
                      <p class="auth">认证可见</p>
                    </div>
                  </div>
                  <div class="bottom">
                    <mu-flex justify-content="end">
                      <mu-button @click="openAlertDialog(item.id)"
                        >取消预约</mu-button
                      >
                    </mu-flex>
                    <mu-dialog
                      title="提示"
                      width="600"
                      max-width="80%"
                      :append-to-body="true"
                      :open="openAlert"
                    >
                      确定您要取消预约吗
                      <mu-button
                        slot="actions"
                        flat
                        color="primary"
                        @click="closeAlertDialog"
                        >取消</mu-button
                      >
                      <mu-button
                        slot="actions"
                        flat
                        color="primary"
                        @click="closeAlertReduceList"
                      >
                        确定
                      </mu-button>
                    </mu-dialog>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <mu-tabs class="mu-tabs" :value="$route.path" center color="teal">
      <mu-tab value="/index" to="/index">
        <mu-icon value="home"></mu-icon>
        首页
      </mu-tab>
      <mu-tab value="/money" to="/money">
        <mu-icon value="local_atm"></mu-icon>
        投资理财
      </mu-tab>
      <mu-tab value="/order">
        <mu-icon value="favorite"></mu-icon>
        投资预约
      </mu-tab>
      <mu-tab value="/my" to="/my">
        <mu-icon value="person_pin"></mu-icon>
        我的
      </mu-tab>
    </mu-tabs>
    <Alert :data="alert"></Alert>
  </div>
</template>
<style scoped lang="scss">
.app {
  max-height: 100%;
  .header {
    position: relative;
    .mu-icon {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
    span {
      display: block;
      text-align: center;
    }
  }

  .nothing {
    width: 100%;
    .middle {
      .title {
        width: 300px;
        margin: 70px auto;
        text-align: center;
        font-size: 18px;
        color: rgb(174, 177, 174);
      }
      .button {
        display: inline-block;
        height: 90px;
        width: 100%;
        .a {
          display: inline-block;
          width: 330px;
          height: 50px;
          margin: 20px 40px;
          text-align: center;
          line-height: 50px;
          background: #009688;
          border-radius: 2px;
          box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
            0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
          .adiv {
            width: 250px;
            height: 50px;
            margin: 0 auto;
            color: white;
            position: relative;
            img {
              height: 25px;
              width: 25px;
              position: absolute;
              top: 10px;
              left: 55px;
            }
          }
        }
      }
    }
    .listall {
      border-bottom: solid 1px #afadad;
      padding: 20px 0;
      span {
        height: 64px;
        font-size: 20px;
        margin: 20px 20px 0 0;
        border-left: solid 3px rgb(21, 149, 223);
        padding-top: 10px;
        padding-bottom: 20px;
      }
      .list {
        .listdetail {
          height: 100px;
          width: 100%;
          margin-top: 15px;
          .top {
            height: 55px;
            width: 100%;
            display: flex;
            .left {
              width: 66%;
              ul {
                width: 100%;
                margin-top: 10px;
                display: flex;
                justify-content: space-around;
                li {
                  list-style: none;
                  p {
                    &:first-child {
                      color: red;
                      text-align: center;
                    }
                  }
                }
              }
            }
            .right {
              width: 34%;
              position: relative;
              .rm {
                position: absolute;
                top: 0;
                left: 10px;
                font-size: 16px;
                color: gold;
              }
              .auth {
                color: pink;
                position: absolute;
                top: 25px;
                left: 0;
              }
              img {
                width: 40px;
                height: 40px;
                position: absolute;
                top: 10px;
                right: 10px;
              }
            }
          }
        }
      }
    }
  }
  .mu-tabs {
    display: flex;
    justify-content: space-evenly;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}
</style>
<script>
// 引入组件
import Header from "../components/Header.vue";
// 引入弹框组件
import Alert from "../components/Alert";
// 弹框样式
let successAlert = {
  show: true,
  iconType: "check_circle",
  text: "取消预约成功!",
  color: "success"
};
export default {
  components: { Header, Alert },
  name: "order",
  props: [],
  mounted() {},
  data() {
    return {
      // 按钮的状态
      openAlert: false,
      // 取消的商品id
      cancelId: null,

      // 弹框相关属性
      alert: {
        show: false,
        iconType: "check_circle",
        text: "取消预约成功!",
        color: "success"
      },
      firstOpenAlert: false
    }
  },

  //获取数据
  // 方法
  methods: {
    // 提示框的取消
    openAlertDialog(id) {
      // 改变存储的id
      this.cancelId = id;
      // 改变按钮的状态
      this.openAlert = true;
    },
    // 点击首屏弹框取消按键
    firstCloseAlertDialog() {
      this.firstOpenAlert = false;
    },
    // 点击首屏弹框确认按钮
    clickFirstConfirm() {
      // 关闭弹窗
      this.firstOpenAlert = false;
      // 跳转页面
      this.$router.replace('/login');
    },
    // 提示框的取消
    closeAlertDialog() {
      this.openAlert = false;
    },
    //提示框确认
    closeAlertReduceList() {
      this.openAlert = false;
      let index = this.$store.state.product.findIndex(
        item => item.id === this.cancelId
      );
      // console.log(index);
      if (index >= 0) {
        this.$store.state.product.splice(index, 1);
        successAlert.show = true;
        this.alert = successAlert;
        // 两秒之后关闭
        this.timeCloseAlert();
      }
    },
    // 后退
    back() {
      this.$router.go(-1);
    },
    // 定时器
    timeCloseAlert() {
      setTimeout(() => {
        this.alert.show = false;
      }, 2000);
    }
  },
  // 计算属性数据
  computed: {
    product() {
      return this.$store.state.product;
    },
    token() {
      // 获取token
      console.log(localStorage.getItem("token"));
      return localStorage.getItem("token");
    }
  },
  // 组件创建完成
  created() {
    if(!this.token) {
      // 弹框显示
      this.firstOpenAlert = true;
    }
  },
  //监听
  watch: {
    product() {
      // console.log(111)
    },
    // 路由的变化
    $route() {}
  }
};
</script>
